<template>
	<div>
		<el-row style="height: 50px;line-height: 50px;text-align: left;">
			<el-cascader   change-on-select :options="treeInBuildData" @change="handleItemChange" :props="props"></el-cascader>
			<el-button type="primary" @click="addNew">添加新设备</el-button>
		</el-row>

		<el-table :data="tableData" stripe style="width: 100%">
			<el-table-column prop="buildName" label="房间">
			</el-table-column>
			<el-table-column prop="typeName" label="设备类型">
			</el-table-column>
			<el-table-column prop="name" label="设备名称">
			</el-table-column>
			<el-table-column prop="code" label="主板地址-逻辑ID-取值板" sortable>
				<template slot-scope="scope">
					{{scope.row.nm}}-{{scope.row.code}} -{{scope.row.logicB}}
				</template>
			</el-table-column>
			<el-table-column prop="gateWayName" label="所属网关">

			</el-table-column>
			<el-table-column fixed="right" label="操作">
				<template slot-scope="scope">
					<el-button type="primary" icon="el-icon-edit" circle @click.native.prevent="updateDevice(scope.$index, tableData)"></el-button>
					<el-button type="danger" icon="el-icon-delete" circle @click.native.prevent="delect(scope.$index, tableData)"></el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="block">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage_all" :page-sizes="[15, 30, 45, 50]" :page-size="15" layout="total, sizes, prev, pager, next, jumper" :total="allCount">
			</el-pagination>
		</div>
		<el-dialog title="添加设备" :visible.sync="dialogFormVisible" :close-on-click-modal="ss">
			<el-form :inline="true" :model="form">
				<!-- <el-from-item>
					 <el-cascader
                      :options="treeInBuildData"
                      @active-item-change="handleItemChange"
                      :props="props"
                    ></el-cascader>
				 </el-from-item>  -->
				<el-form-item label="选择楼宇:">
					<el-select v-model="louYuId" placeholder="请选择楼宇">
						<el-option :label="x.name" :value="x.id" v-for="x in louYu"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="选择楼层:">
					<el-select v-model="louCeId" placeholder="请选择楼层">
						<el-option :label="x.name" :value="x.id" v-for="x in louCe"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="选择房间:">
					<el-select v-model="addDevice.BuildId" placeholder="请选择房间">
						<el-option :label="x.name" :value="x.id" v-for="x in louRoom"></el-option>
					</el-select>
				</el-form-item> 
<!-- handleItemChangeUpdate -->
					<!-- <el-cascader :options="treeInBuildData" @change="addBuildChange" :props="props" ></el-cascader> -->

				<el-form-item label="选择设备类型:">
					<el-select v-model="addDevice.DeviceTypeID" placeholder="请选择设备类型">
						<el-option :label="x.name" :value="x.id" v-for="x in deviceType"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="选择网关" v-if="!showZhuBan">
					<el-select v-model="addDevice.GateWayID" placeholder="请选择网关">
						<el-option :label="x.name" :value="x.id" v-for="x in wayData"></el-option>

					</el-select>
				</el-form-item>
				<el-form-item label="主板地址" v-if="showZhuBan">
					<el-input v-model="addDevice.nm" placeholder="请输入主板地址"></el-input>
				</el-form-item>
				<el-form-item label="输入电压" v-if="show">
					<!-- <el-input v-model="addDevice.V" placeholder="请输入电压"></el-input> -->
					<el-select v-model="addDevice.V" placeholder="请选择电压">
						<el-option :label="x.name" :value="x.name" v-for="x in dianyaData"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="输入电流" v-if="show">
					<el-input v-model="addDevice.A" placeholder="请输入电流"></el-input>
				</el-form-item>
				<el-form-item label="输入设备开关(逻辑)Id:">
					<el-input v-model="addDevice.Code" placeholder="请输入设备逻辑Id"></el-input>
				</el-form-item>
				<el-form-item label="取值板" v-if="show">
					<el-input v-model="addDevice.logicB" placeholder="请输入取值板"></el-input>
				</el-form-item>
				<el-form-item label="输入设备名称">
					<el-input v-model="addDevice.Name" placeholder="请输入设备名称"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="sure">确 定</el-button>
			</div>
		</el-dialog>

		<el-dialog title="编辑设备" :visible.sync="dialogFormVisible_update" :close-on-click-modal="ss">
			<el-form :inline="true" :model="form">
				<el-form-item label="所属房间:">
					<el-input v-model="update.room" @focus="showChoseBuild" v-if="showBuildChose"></el-input>
					<el-cascader :options="treeInBuildData" @change="handleItemChangeUpdate" :props="props" v-if="!showBuildChose"></el-cascader>
				</el-form-item>
				<el-form-item label="选择设备类型:">
					<el-select v-model="update.DeviceTypeID" placeholder="请选择设备类型" disabled>
						<el-option :label="x.name" :value="x.id" v-for="x in deviceType"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="所属网关:" v-if="!show">
					<el-select v-model="ipUpdate" placeholder="请选择网关">
						<el-option :label="x.name" :value="x.id" v-for="x in wayData"></el-option>
					</el-select>
					<!--<el-input v-model="update.ip" disabled></el-input>-->
				</el-form-item>
				<el-form-item label="主板地址">
					<el-input v-model="update.nm" placeholder="请输入主板地址"></el-input>
				</el-form-item>

				<el-form-item label="电压值" v-if="show">
					<!-- <el-input v-model="update.v" placeholder="请输入电压"></el-input> -->
					<el-select v-model="update.v" placeholder="请选择电压">
						<el-option :label="x.name" :value="x.name" v-for="x in dianyaData"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="电流值" v-if="show">
					<el-input v-model="update.a" placeholder="请输入电流"></el-input>
				</el-form-item>

				<el-form-item label="输入设备开关(逻辑)Id:">
					<el-input v-model="LJId">update.LJId</el-input>
				</el-form-item>
				<el-form-item label="取值板" v-if="show">
					<el-input v-model="update.logicB" placeholder="请输入取值板"></el-input>
				</el-form-item>
				<el-form-item label="设备名称">
					<el-input v-model="sheBeiName">update.name</el-input>
				</el-form-item>

			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible_update = false">取 消</el-button>
				<el-button type="primary" @click="sureUpdate()">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				ss: false,
				showBuildChose: true,
				update: {},
				ipUpdate: "",
				props: {
					value: 'id',
					label: 'name',
					children: 'sub'
				},
				dianyaData: [{
						name: "220"
					},
					{
						name: "380"
					}
				],
				treeInBuildData: [
					{id:"",
					name:"全部",
					sub:[]
					}
				],
				dialogFormVisible_update: false, //这是编辑设备的弹窗显示
				allCount: "", //总台数
				currentPage_all: "", //总页数
				isAdd: "true",
				addWayData: {
					"IP": "",
					"Url": "",
					"Inner": true
				},
				getBuildListData: {
					ParentId: "",
					Pager: "false",
					PageIndex: "",
					PageSize: ""
				},
				getDeviceData: {
					Pager: "false",
					PageIndex: "",
					PageSize: ""
				},
				getDeviceTypeData: {
					isPage: false
				},
				louYuId: "",
				louCeId: "",
				addDevice: {
					V: "",
					A: "",
					nm: "",
					Code: "",
					Name: "",
					BuildId: "",
					DeviceTypeID: "",
					values: "",
					GateWayID: "",
					logicB: ""
				},
				props: {
					value: 'id',
					label: 'name',
					children: 'sub'
				},
				LJId: "",
				show: false,
				showZhuBan:true,//主板显示的只有空开和水流量有
				sheBeiName: "",
				update: {},
				louYu: [],
				louCe: [],
				louRoom: [],
				deviceType: [],
				tableData: [],
				wayData: [],
				dialogFormVisible: false,
				formLabelWidth: "120px",
				value2: true,
				value1: true,
				getDevData: {
					BuildID: "",
					GateWaysID: "",
					TypesID: "",
					isPage: true,
					PageIndex: 0,
					PageSize: 15
				},
				delectDevData: {
					ID: ""
				}
			};
		},

		watch: {
			louYuId(a, b) {
				debugger
				if(a==""){
				this.louCe = []
				}else{
				this.getBuildListData.ParentId = a;
				this.getBuildData(res => {
					this.louCe = res;
				})	
				}
				
			},
			louCeId(a, b) {
				debugger
				if(a == ""){
this.louRoom = []
				}else{
					this.getBuildListData.ParentId = a;
				this.getBuildData(res => {
					this.louRoom = res
				})
					
				}
				
			},
			LJId(a, b) {
				this.update.Code = a;
			},
			sheBeiName(a, b) {
				this.update.name = a;
			},
			ipUpdate(a, b) {
				this.update.GateWayID = a;
			},

			//监听空开数据类型的改变
			'addDevice.DeviceTypeID' (a, b) {
				for(let i = 0; i < this.deviceType.length; i++) {
					if(a == this.deviceType[i].id) {
						if(this.deviceType[i].name.indexOf('空开') >= 0 ) {
							this.show = true;
						} else {
							this.show = false;
						}
						if(this.deviceType[i].name.indexOf("空开")>=0 || this.deviceType[i].name.indexOf("水流量") >=0){
							this.showZhuBan = true;
						}else{
							this.showZhuBan = false;
						}
					}
				}

			}
		},
		methods: {
			//获取楼层数据书结构
			// getBuildDataInTree() {
			// 	this.$httpRequest.get("api/Build/GetBuildTree", "", res => {
			// 		this.treeInBuildData = res.data;
			// 		console.log(this.treeInBuildData);
			// 	});
			// },
			showChoseBuild() {
				debugger
				this.showBuildChose = false
			},
			//楼层选择
			handleItemChange(val) {
				var buildId = val[val.length - 1];
				this.deviceData = [],
					this.deviceId = "",
					this.getDevData.BuildID = buildId;
				this.getData();
				//this.getDeviceByConfig(this.getDeviceData);
			},
			handleItemChangeUpdate(val) {
				debugger
				var buildId = val[val.length - 1];
				this.update.BuildId = buildId;
				//this.update.name = "";
			},
			addBuildChange(val){

	            var buildId = val[val.length - 1];
				this.addDevice.BuildId = buildId;
			},
			handleSizeChange(val) {
				this.getDevData.PageSize = val;
				this.getDevData.PageIndex = 0;
				this.getData();
			},
			////获取楼层数据书结构
			getBuildDataInTree() {
				this.$httpRequest.get('api/Build/GetBuildTree', "", res => {
					this.treeInBuildData = res.data
					console.log(this.treeInBuildData);
				})
			},
			//确认修改设备
			sureUpdate() {
				this.getWay();
				this.$httpRequest.post('api/Device/Update', this.update, res => {
					if(res.isSuccess) {
						this.$notify({
							title: '修改设备',
							message: '成功',
							type: 'success'
						});
						this.getDevData.PageIndex = 0;
						this.getDevData.PageSize = 15;
						this.dialogFormVisible_update = false;
						this.getData();
					} else {
						this.$notify({
							title: '修改设备',
							message: '失败',
							type: 'error'
						});
					}
				})
			},
			handleCurrentChange(val) {
				this.getDevData.PageIndex = val - 1;
				this.getData();
			},
			//一进来获取数据的方法
			getData() {
				this.$httpRequest.get('api/Device/GetList', this.getDevData, response => {
					if(response.isSuccess) {
						var data = response.data;
						this.tableData = data;
						this.allCount = response.dataCount, //总台数
							this.currentPage_all = this.allCount / this.getDeviceData.PageSize;
					} else {

					}
				})
			},
			//修改设备的方法
			updateDevice(index, arrData) {
				debugger
				this.show = false;
				this.showBuildChose = true;
				this.dialogFormVisible_update = true;
				var data = arrData[index];
				if(data.typeName.indexOf("空开") >= 0 || data.typeName.indexOf("水流量") >= 0) {
					this.show = true;
				} else {
					this.show = false;
				}
				this.getWay();
				this.getDeviceType();
				this.LJId = data.code;
				this.sheBeiName = data.name;
				this.update = {
					name: this.sheBeiName,
					BuildId: data.buildID,
					nm: data.nm,
					logicB: data.logicB,
					v: data.v,
					a: data.a,
					DeviceTypeID: data.deviceTypeID,
					Code: data.code,
					Location_X: data.location_X,
					Location_Y: data.location_Y,
					GateWayID: data.gateWayID,
					room: data.buildName,
					DeviceTypeID: data.deviceTypeID,
					ip: data.ip,
					LJId: this.LJId,
					ID: data.id
				}
				this.ipUpdate = data.gateWayID;
				let updateData = {
					Name: "",

				}
			},
			//保存的方法
			sure() {
				this.$httpRequest.post('api/Device/Add', this.addDevice, response => {
					if(response.isSuccess) {
						this.dialogFormVisible = false
						this.$notify({
							title: '添加设备',
							message: '成功',
							type: 'success'
						});
						this.getDevData.PageIndex = 0;
						this.getDevData.PageSize = 15;
						this.getData();
					} else {
						this.dialogFormVisible = false
						this.$notify({
							title: '添加设备失败',
							message: response.msg,
							type: 'error'
						});
					}
				})
			},
			//删除的方法
			delect(index, arrData) {
				this.delectDevData.ID = arrData[index].id
				this.$httpRequest.post('api/Device/Delete', this.delectDevData, response => {
					if(response.isSuccess) {
						this.$notify({
							title: '删除设备',
							message: '成功',
							type: 'success'
						});
						this.getData();
					} else {
						this.$notify({
							title: '删除设备失败',
							message: response.msg,
							type: 'error'
						});
					}
				})
			},
			//获取楼层数据
			getBuildData(res) {
				debugger
				this.$httpRequest.get('api/Build/GetList', this.getBuildListData, response => {
					if(response.isSuccess) {
						let data = response.data;
						res(data)
					} else {

					}
				})
			},
			//新增的方法
			addNew() {
				this.show = false;
				this.getBuildDataInTree();
				this.dialogFormVisible = true
				this.addDevice = {
					V: "",
					A: "",
					nm: "",
					Code: "",
					Name: "",
					BuildId: "",
					DeviceTypeID: "",
					values: "",
					GateWayID: "",
					logicB: ""
				},
				this.isAdd = true;
				this.louYuId = "";
				this.louCeId = "";
				this.addWayData.IP = "";
				this.addWayData.Url = "";
				this.addWayData.Inner = true;
				this.addWayData.ID = "";
				this.getBuildListData.ParentId = ""
				this.getBuildData(res => {
					this.louYu = res
				});
				this.getBuildDataInTree();
				this.getDeviceType();
				this.getWay();
			},
			//获取设备类型的方法
			getDeviceType() {
				this.$httpRequest.get('api/DeviceType/GetList', this.getDeviceTypeData, response => {
					if(response.isSuccess) {
						this.deviceType = response.data;
					} else {

					}
				})
			},
			//获取网关的列表
			getWay() {
				this.$httpRequest.get('api/GateWay/GetList', this.getDeviceData, response => {
					if(response.isSuccess) {
						this.wayData = response.data;
					} else {

					}
				})
			}
		},
		created() {
			this.getBuildDataInTree();
			this.getData()
		}
	};
</script>

<style>
	@import url("//unpkg.com/element-ui@2.4.7/lib/theme-chalk/index.css");
</style>